<template>
  <div>
    <p>百度地图</p>
    <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置" style="width: 1000px"></el-input>
    <baidu-map class="bmView" :scroll-wheel-zoom="true" :center="center" :zoom="zoom" @click="getLocationPoint">
      <!-- 右上角的混合与地图 -->
      <bm-map-type :map-types="['BMAP_HYBRID_MAP', 'BMAP_NORMAL_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
      <!-- 标红部分 设置位置(找了好久才找到这个方法) -->
      <bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT" :offset="{ width: 100, height: 10 }"></bm-city-list>
      <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      <!-- 标记 点 -->
      <!-- <bm-marker :position="postionMap"> -->
    </baidu-map>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      center: { lng: 113.17, lat: 23.8 },
      zoom: 15,
      addressKeyword: "",
    }
  },
  methods: {
    getLocationPoint(e) {
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
      /* 创建地址解析器的实例 */
      let geoCoder = new BMap.Geocoder()
      /* 获取位置对应的坐标 */
      geoCoder.getPoint(this.addressKeyword, (point) => {
        this.selectedLng = point.lng
        this.selectedLat = point.lat
      })
      /* 利用坐标获取地址的详细信息 */
      geoCoder.getLocation(e.point, (res) => {
        console.log(res)
      })
    },
  },
}
</script>
<style lang="less" scoped>
.bmView {
  width: 1000px;
  height: 600px;
}
</style>
